<template>
  <div>
    姓名:{{ person.name }} 年龄:{{ person.age }} 车:{{ person.car.c1 }},{{
      person.car.c2
    }}
  </div>
  <button @click="changeName">修改姓名</button>
  <button @click="changeAge">修改年龄</button>
  <button @click="changeC1">修改C1</button>
  <button @click="changeC2">修改C2</button>
  <button @click="changeCar">修改车</button>
</template>
<script setup lang="ts">
import { reactive, watch } from "vue";

let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "雅迪",
    c2: "爱玛",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeC1() {
  person.car.c1 = "奔驰";
}
function changeC2() {
  person.car.c2 = "宝马";
}
function changeCar() {
  person.car = {
    c1: "大众",
    c2: "小米su7",
  };
}

// //监视所有
// watch(person, () => {
//   console.log("监视所有");
// });

//####***<!!!!监视,情况四:监视响应式对象中的某个属性,且该属性是基本类型的,要写成函数式!!!!>

// watch(
//   () => {
//     return person.age;
//   },
//   () => {
//     console.log("person.name变化了,只是监视年龄");
//   }
// );
// //由于watch只是监视四种类型,所以不能直接写成person.age(其实是变成getter函数类型)

//当你遇到本就是对象类型的,还是推荐使用函数(对象类型不会观察整体的变化,但对象里的属性会监视到)

watch(person.car, () => {
  console.log("车变化了");
}); //直接入微,但整体观察不到

watch(
  () => person.car,
  () => {
    console.log("车变化了");
  },
  { deep: true }
);
//变成函数可观察整体,且深度监视(deep)后可入微((推荐))
</script>
